

.container{margin:0 auto;}


.container{width: 960px;}
img{
	width: 100%;
	max-width: 100%;
}

#showcase{
	/*background: url(../images/outlook_mobile.jpg) 50% 50% no-repeat;*/
	background-image: url(../images/outlook_mobile.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-weblikt-background-size:100%
	background-size:100%;
	height: 451px;
}

#header, #navigation, #footer, #mainbody, #sidebar {
    background: none repeat scroll 0 0 #eee;
    height: 100px;
    line-height: 25px;
    margin-bottom: 20px;
}

#mainbody,#sidebar {
	height: 300px;
    float: left;
}

#mainbody {
    width: 620px;
    height: 300px;
    background: #ddefcb;
    float: right;
}

#sidebar {
    
    width: 300px;
    background: #ffcbdd;
}

#footer {
    clear: both;
}


ul{

	list-style: none;
	padding: 0;
}

#navigation li,#navigation li a{
	display: inline-block;
	padding: 7px 15px;
	text-decoration: none;
	color: #3b3b3b;
}

#navigation li:hover{
	background: #eee;
}

#navigation{
	background: none;
}

#navigation .active{

	background: #eee;
}

.toggle-btn{
	display: none;
}


.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

.slider-control button{border-radius: 50%;opacity: 0.5;width: 50px;height: 50px;}

.slider-control .fa{font-size: 20px}
.slider-control .left{position: absolute;top:120px;}
.slider-control .right{position: absolute;top:120px;right: 0;}
@media screen and (min-width: 1200px){
	.container{
		width: 1170px;

	}
	#mainbody{
		width: 770px;
	}

	#sidebar{
		background: #ffcbdd;
		width: 370px;
	}
	
}

@media screen and (max-width: 960px) {
	.container{
		width: 100%;

	}
	#mainbody{
		width: 67%;
	}

	#sidebar{
		width: 30%;
	}
}


@media screen and (max-width: 600px) {
	.container{
		width: 100%;

	}
	#mainbody{
		width: 100%;
	}

	#sidebar{
		width: 100%;
	}

	/*切换按钮*/

	.toggle-btn{
		display: inline-block;
		background: #000;
		color: #fff;
		padding: 7px 10px;
		position: absolute;
		right: 10px;
		top: 50px;
		font-size: 20px;
	}

	#navigation .close
	{
		display: none;
	}

	#navigation:target .close{
		display: inline-block;
	}

	#navigation{
		display: none;
		z-index: 9999;
	}


	#navigation:target{
		display: block;
		position: absolute;
		top: 0;
		padding-top: 70px;
		width: 100%
	}

	#navigation:target ul{
		background-color: #000;
	}

	#navigation:target li,#navigation:target li a{
		display: block;
		color: #eee;
		text-align: left;
	}

	#navigation:target li a:hover{
		background-color: #3b3b3b;
	}

	#navigation:target .active{
		background-color: #272727;
	}


}


@media (max-width: 480px){
	#showcase{

		background-image: url(../images/blek-image.jpg);
	}
}


@media (max-width: 480px) and (min-resolution:2dppx),(max-width: 480px) and (-webkit-min-device-pixel-ratio:2){
	#showcase{

		background-image: url(../images/960bg.jpg);
	}
}


